<template>
	<view class="setting padding-md margin-md border-radius-md">
		<view class="user">
			<uv-cell :border="false">
				<!-- 自定义左侧标题 -->
				<template v-slot:title>
					<text>{{ memberInfo.nickname }}</text>
				</template>
				<!-- 自定义左侧图标 -->
				<template v-slot:icon>
					<view style="margin-right: 20rpx">
						<uv-avatar size="60" :src="memberInfo.avatar" randomBgColor></uv-avatar>
					</view>
				</template>
				<!-- 自定义左侧标题下面的内容 -->
				<template v-slot:label>
					<text class="font-size-sm text-color-placeholder" style="margin-top: 10rpx;">{{
						memberInfo.created_at }}</text>
				</template>
			</uv-cell>
		</view>

		<view class="">
			<uv-cell-group>
				<uv-cell :icon="nav.icon" :title="nav.title" v-for="(nav, nIndex) in navOptions" :key="nIndex"
					@click="toPage(nav)"></uv-cell>
			</uv-cell-group>
		</view>
	</view>
</template>

<script lang="ts" setup>
import useAppStore from '@/store/app';
import { ref } from 'vue';

const appStore = useAppStore();

const memberInfo = ref(appStore.member);

const navOptions = [
	{ title: '添加事件', path: '/pages/thing/choose-option', icon: 'plus-circle-fill', color: '#8d4bbb' },
	{ title: '快捷输入', path: '/pages/thing-option/list', icon: 'file-text-fill', color: '#00bc12' },
	{ title: '个人信息', icon: 'account-fill', color: '#ffb61e' },
	// #ifdef MP-WEIXIN
	{ title: '绑定微信', path: '/pages/bindWx/bindWx', icon: 'weixin-circle-fill', color: '#4b5cc4' },
	// #endif
	{ title: '联系我们', icon: 'server-fill', color: '#00bc12' }
];

function toPage(item: { path?: string }) {
	if (item.path) {
		uni.navigateTo({
			url: item.path
		});
	}
}
</script>
<script lang="ts">
export default {
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	}
};
</script>
<style lang="scss" scoped>
.setting {
	background-color: #ffffff;

	::v-deep(.uv-cell) {
		.uv-cell__body {
			padding: 40rpx;
			// @apply padding-md;
		}
	}
}
</style>
